<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper" :class="[field!=='action' && !value?'required': field!=='action' ?'required-'+field: '']" >
      <a-input
        v-if="tagType === 'input'"
        v-model="value"
        @change="handleChange($event)"
        @blur="handleBlur($event)"
        placeholder="请输入"
      />
      <j-dict-select-tag
        v-if="tagType === 'dict-select'"
        v-model="value"
        :dictCode="dictCode"
        @change="handleChange($event)"
        @blur="handleBlur($event)"
        placeholder="请选择"
        style="width: 100px"
      />
      <j-search-select-tag
        v-if="tagType === 'search-select'"
        v-model="value"
        :dictOptions="dictOptions"
        placeholder="请选择"
        @change="handleChange($event)"
        @blur="handleBlur($event)"
      />
      <a-range-picker
        v-if="tagType === 'range-picker'"
        v-model="value"
        valueFormat="YYYY-MM-DD"
        format="YYYY-MM-DD"
        :show-time="false"
        @change="handleChange($event)"
      />
      <!-- <a-input :value="value" @change="handleChange" @pressEnter="check" placeholder="请输入" /> -->
      <!-- <a-icon type="check" class="editable-cell-icon-check" @click="check" /> -->
      <!--//操作区域-->
      <template v-if="field==='action'">
        <a-space :size="6">
            <a @click.stop="onSave">保存</a>
            <a-divider type='vertical'/>
            <a-popconfirm title="确定要取消编辑吗?" @onConfirm="onCancel">
              <a :disabled="editingKey !== ''">取消</a>
            </a-popconfirm>
        </a-space>
      </template>
    </div>
    <div v-else class="editable-cell-text-wrapper">
      {{
        tagType === 'dict-select'
          ? $filterDictTextByCache(dictCode, value)
          : tagType === 'search-select'
          ? value==1?'组长': value==2?'成员':''
          : tagType === 'range-picker' && value && value.length > 0
          ? value[0] + '~' + value[1]
          : value
      }}
      <!--//操作区域-->
      <template v-if="field==='action'">
        <a-space :size="6">
          <a :disabled="editingKey !== ''" @click="onEdit">编辑</a>
          <a-divider type='vertical'/>
          <a-popconfirm title="确定要删除吗?" @onConfirm="onDelete">
            <a :disabled="editingKey !== ''">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: ['field', 'text', 'tagType', 'dictCode', 'editable', 'editingKey'],
  data() {
    return {
      value: this.text,
      dictOptions: [
        { text:"组长", value:"1" },
        { text:"成员", value:"2" }
      ]
    }
  },
  methods: {
    handleChange(e) {
      let value
      let typeofObject = typeof e === 'object' && !Array.isArray(e) && e !== null
      if (typeofObject && Object.keys(e).length > 0) {
        value = e.target.value
      } else {
        value = e
      }
      this.value = value
      this.$emit('change', this.value)
    },
    handleBlur(e) {
      let value
      let typeofObject = typeof e == 'object' && !Array.isArray(e) && e !== null
      if (typeofObject && Object.keys(e).length > 0) {
        value = e.target.value
      } else {
        value = e
      }
      this.value = value
      this.$emit('blur', this.value)
    },
    onEdit() {
      this.$emit('onEdit')
    },
    onSave() {
      this.$emit('onSave')
    },
    onCancel() {
      this.$emit('onCancel')
    },
    onDelete() {
      this.$emit('onDelete')
    }
  }
}
</script>
<style lang="less" scoped>
.required,
.required-regExp {
  .ant-input,
  :deep(.ant-select-selection) {
    border-color: #f5222d;
    margin-bottom: 2px !important;
  }
}
.required {
  &::after {
    content: '不能为空';
    color: #f5222d;
    display: block;
  }
}
.required-regExp {
  &::after {
    content: '校验不通过';
    color: #f5222d;
    display: block;
  }
}
</style>
